<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>告警详情 - 御物联</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        :root{--primary:#409EFF;--stage-bg:#EDE3D3;--bg:#F5F7FA;--text:#303133;--subtext:#909399;--card:#FFFFFF;--border:#EBEEF5;--ok:#67C23A;--warn:#E6A23C;--danger:#F56C6C}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--stage-bg);color:var(--text)}
        .page{min-height:100vh;max-width:480px;margin:0 auto;background:var(--bg);padding-bottom:calc(72px + env(safe-area-inset-bottom))}
        
        /* 返回按钮 */
        .back-btn{display:flex;align-items:center;gap:8px;padding:12px;color:var(--text);text-decoration:none;font-size:14px}
        .back-btn:hover{color:var(--primary)}
        .back-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
        
        /* 卡片样式 */
        .card{background:var(--card);border-radius:12px;margin:0 12px 12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
        .card-title{font-size:12px;color:var(--subtext);margin-bottom:8px}
        .card-value{font-size:16px;font-weight:600;color:var(--text)}
        
        /* 告警基本信息卡片 */
        .alarm-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
        .alarm-info .card{grid-column:span 2}
        .alarm-info .card:last-child{grid-column:span 1}
        .alarm-info .card:nth-last-child(2){grid-column:span 1}
        
        /* 传感器详情卡片 */
        .sensor-card{background:var(--card);border-radius:12px;margin:0 12px 12px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
        .sensor-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px}
        .sensor-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
        .sensor-item:last-child{border-bottom:none}
        .sensor-label{font-size:13px;color:var(--subtext)}
        .sensor-value{font-size:13px;color:var(--text);font-weight:500}
        
        /* 告警处理按钮 */
        .process-btn{width:100%;height:44px;background:var(--primary);color:white;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(64,158,255,.3)}
        .process-btn:hover{background:#66b1ff;transform:translateY(-1px)}
        
        /* 对话框样式 */
        .modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
        .modal-dialog{background:var(--card);border-radius:12px;width:100%;max-width:400px;box-shadow:0 8px 32px rgba(0,0,0,0.2)}
        .modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
        .modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text)}
        .close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--subtext);padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
        .close-btn:hover{color:var(--text)}
        .modal-body{padding:20px}
        .form-group{margin-bottom:16px}
        .form-group label{display:block;margin-bottom:6px;font-size:14px;color:var(--text);font-weight:500}
        .form-select{width:100%;height:36px;border:1px solid var(--border);border-radius:6px;background:var(--card);padding:0 12px;color:var(--text);font-size:14px}
        .form-select:disabled{background:var(--bg);color:var(--subtext);cursor:not-allowed}
        .form-textarea{width:100%;min-height:80px;border:1px solid var(--border);border-radius:6px;background:var(--card);padding:12px;color:var(--text);font-size:14px;resize:vertical;font-family:inherit}
        .modal-footer{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--border);justify-content:flex-end}
        .btn-cancel{height:36px;padding:0 16px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:14px;cursor:pointer}
        .btn-cancel:hover{background:var(--bg)}
        .btn-confirm{height:36px;padding:0 16px;border-radius:6px;border:none;background:var(--primary);color:white;font-size:14px;cursor:pointer}
        .btn-confirm:hover{background:#66b1ff}
        
        
        /* 响应式调整 */
        @media (max-width: 480px) {
            .alarm-info{grid-template-columns:1fr}
            .alarm-info .card{grid-column:span 1}
        }
    </style>
</head>
<body>
    <div class="page">
        <!-- 返回按钮 -->
        <a href="alarm-list.html" class="back-btn">
            <div class="back-icon">←</div>
            <span>返回系统告警列表</span>
        </a>
        
        <!-- 告警基本信息 -->
        <div class="alarm-info">
            <div class="card">
                <div class="card-title">告警时间</div>
                <div class="card-value">2025-10-22 10:43:09</div>
            </div>
            <div class="card">
                <div class="card-title">所属网点</div>
                <div class="card-value">物联网内部测试系统</div>
            </div>
            <div class="card">
                <div class="card-title">告警等级</div>
                <div class="card-value">预警</div>
            </div>
            <div class="card">
                <div class="card-title">告警设备</div>
                <div class="card-value">-</div>
            </div>
        </div>
        
        <!-- 传感器详情 -->
        <div class="sensor-card">
            <div class="sensor-title">传感器: 水位</div>
            <div class="sensor-item">
                <span class="sensor-label">因子</span>
                <span class="sensor-value">水位</span>
            </div>
            <div class="sensor-item">
                <span class="sensor-label">触发条件</span>
                <span class="sensor-value">水位>10.00m</span>
            </div>
            <div class="sensor-item">
                <span class="sensor-label">实际值</span>
                <span class="sensor-value">0.29m</span>
            </div>
        </div>
        
        <div class="sensor-card">
            <div class="sensor-title">传感器: 水压2</div>
            <div class="sensor-item">
                <span class="sensor-label">因子</span>
                <span class="sensor-value">液压</span>
            </div>
            <div class="sensor-item">
                <span class="sensor-label">触发条件</span>
                <span class="sensor-value">液压>0.80MPa</span>
            </div>
            <div class="sensor-item">
                <span class="sensor-label">实际值</span>
                <span class="sensor-value">-0.38MPa</span>
            </div>
        </div>
        
        <div class="sensor-card">
            <div class="sensor-title">传感器: 水泵状态</div>
            <div class="sensor-item">
                <span class="sensor-label">因子</span>
                <span class="sensor-value">各类开关量</span>
            </div>
            <div class="sensor-item">
                <span class="sensor-label">触发条件</span>
                <span class="sensor-value">各类开关量=1.00</span>
            </div>
            <div class="sensor-item">
                <span class="sensor-label">实际值</span>
                <span class="sensor-value">1.00</span>
            </div>
        </div>
        
        <!-- 告警处理按钮 -->
        <div style="padding: 0 12px 20px;">
            <button class="process-btn" onclick="showProcessDialog()">告警处理</button>
        </div>
        
    </div>
    
    <!-- 告警处理对话框 -->
    <div class="modal-mask" id="processModal" style="display:none;">
        <div class="modal-dialog">
            <div class="modal-header">
                <h3>告警处理</h3>
                <button class="close-btn" onclick="closeProcessDialog()">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>处理人:</label>
                    <select class="form-select" id="handlerSelect" disabled>
                        <option value="currentUser" selected>当前用户</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>处理方式:</label>
                    <select class="form-select" id="processTypeSelect" disabled>
                        <option value="processed" selected>已处理</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>处理描述:</label>
                    <textarea class="form-textarea" id="processDescription" placeholder="请输入处理描述..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-cancel" onclick="closeProcessDialog()">取消</button>
                <button class="btn-confirm" onclick="submitProcess()">确定</button>
            </div>
        </div>
    </div>
    
    <script>
        
        // 页面加载时获取告警ID参数
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const alarmId = urlParams.get('id');
            
            if (alarmId) {
                // 根据告警ID加载不同的数据
                loadAlarmDetail(alarmId);
            }
        });
        
        function loadAlarmDetail(alarmId) {
            // 这里可以根据告警ID加载不同的告警详情数据
            console.log('加载告警详情:', alarmId);
        }
        
        // 显示告警处理对话框
        function showProcessDialog() {
            // 设置当前用户信息
            const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
            const handlerSelect = document.getElementById('handlerSelect');
            handlerSelect.innerHTML = `<option value="currentUser" selected>${currentUser.name || '当前用户'}</option>`;
            
            document.getElementById('processModal').style.display = 'flex';
        }
        
        // 关闭告警处理对话框
        function closeProcessDialog() {
            document.getElementById('processModal').style.display = 'none';
            // 清空表单
            document.getElementById('processDescription').value = '';
        }
        
        // 提交告警处理
        function submitProcess() {
            const handler = document.getElementById('handlerSelect').value;
            const processType = document.getElementById('processTypeSelect').value;
            const description = document.getElementById('processDescription').value;
            
            if (!description.trim()) {
                alert('请输入处理描述');
                return;
            }
            
            // 这里可以发送数据到服务器
            console.log('告警处理提交:', {
                handler: handler,
                processType: processType,
                description: description
            });
            
            alert('告警处理提交成功！');
            closeProcessDialog();
        }
        
        // 点击遮罩关闭对话框
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('modal-mask')) {
                closeProcessDialog();
            }
        });
    </script>
</body>
</html>
